/**
 * @author xxxx.xx
 * @description vuex的定义、实例化库
 */
import Vue from 'vue'
import Vuex from 'vuex'

// 引入持久化库 -- persistState 是一个方法，而plugins需要的是一个实例
import PersistState from 'vuex-persistedstate'

// 引入获取权限的接口
import { rightsApi } from '../apis/homeApi'

// 全局插件注册
Vue.use(Vuex)

// 实例化Store类
// const store = new Vuex.Store({

// 在系统初始化的时候会执行一个new运算，把所有方法和数据进行重新初始化，所以保存在vuex中的数据就会丢失
// 需要第三方来支持数据缓存，解决数据丢失问题？vuex的数据丢失，state丢失，persisted持久化 => vuex-persistedstate vuex的持久化state库
// Persist and rehydrate your Vuex state between page reloads. 页面重载的时候，给你持久化和重置vuex state数据
// 先安装支持库：cnpm i -S vuex-persistedstate
export default new Vuex.Store({

    // state?: S | (() => S);
    // getters?: GetterTree<S, S>;
    // actions?: ActionTree<S, S>;
    // mutations?: MutationTree<S>;
    // ------------------------ 用于定义全局的不带命名空间的一个状态数据
    // modules?: ModuleTree<S>;
    // ------------------------ 定义模块
    // plugins?: Plugin<S>[];
    // ------------------------ 可以做一些插件
    // strict?: boolean;
    // ------------------------ 声明严格模式
    // devtools?: boolean;
    // ------------------------ 开启调试工具

    // 注入插件
    // plugins?: Plugin<S>[];
    // Plugin[] => 它是一个数组，它的每一个属性对象都应该是实例对象
    plugins: [
        // 注入这个实例以后，数据就没有丢失了，数据应该存在的哪里的？
        // 在浏览器中可以实现的缓存有：cookie、localStorage、sessionStorage
        // 这个插件默认的存储：localStorage
        // new PersistState()
        // 因为实例化的时候，可以传递参数
        PersistState({
            // 制定存储的位置
            storage: window.sessionStorage
        })
    ],

    // 定义模块
    modules: {
        // 定义模块名字
        common: {
            // 设置命名空间可用
            namespaced: true,

            // 初始化、定义缓存数据对象
            state: {
                token: '',
                userInfo: {},
                userRights: []
            },

            // 定义数据暴露、获取接口 -- getter方法(因为getter方法是一个数据值，而不是一个方法)
            getters: {
                // 为了语义化，可以把getter方法的名字和数据名字取一样的名字
                // 因为state和getters是同一级别的属性，要获取state的数据，只能是入参进来
                // token(state) {
                //     return state.token
                // }
                // 可以简写
                // token: (state) => { return state.token }
                // token: (state) => state.token
                // 在方法里边的形参是一个对象的时候可以解构
                token: ({token}) => token,
                userInfo: ({userInfo}) => userInfo,
                userRights: ({userRights}) => userRights
            },

            // 定义一个扭转state数据的方法
            mutations: {
                setToken(state, token) {
                    state.token = token
                },
                setUser(state, user) {
                    state.userInfo = user
                },
                setRights(state, rights) {
                    state.userRights = rights
                }
            },

            // 定义一个action来执行数据处理业务方法
            actions: {
                // tokenAct(store, token) {
                //     let newToken = 'token-' + token
                //     store.commit('setToken', newToken)
                // }
                // 因为对象可以解构，commit方法是可以解构出来的
                async rightsAct({ commit }, ids) {

                    // 获取服务器的权限数据，然后缓存数据
                    let result = await rightsApi(ids)
                    commit('setRights', result.data)
                }
            }
        }
    }
})

// export default store